<script>
import DataSheet from '../../../material/datasheet/DataSheet';
import MapConfig from '../../chartconfig/MapConfig';
import BaseConfig from '../../chartconfig/BaseConfig';
import { MapItem } from '../../chartconfig/config/component-config.js';
import * as mapConfig from '../../chartconfig/config/map-config.js';
import * as types from '../../../../store/types.js';
import { uuid } from '@ktw/ktools';
import { mapGetters } from 'vuex';
import WorkSpaceQuery from '../../../../mixins/WorkspaceQuery';
import SheetLoader from '../../../../utils/sheet-loader';

export default {
  name: 'MapData',
  components: {
    DataSheet,
    MapConfig,
  },
  mixins: [BaseConfig, WorkSpaceQuery],
  props: {
    editLayerData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      newData: false,
      seachData: '',
      dataSheetList: [],
      sheetName: '',
      chartlist: MapItem,
      chartType: '',
      subjectId: '',
      isSelectType: false,
      subjectType: '',
    };
  },
  computed: {
    ...mapGetters(['controls', 'currentId']),
    chartOptions() {
      return this.controls[this.currentId].options;
    },
  },
  watch: {
    editLayerData(layers) {
      const selectType = {
        rendermap() {
          this.$nextTick(() => {
            this.chartType = 'RenderMap';
            this.isSelectType = true;
            this.subjectType = '分段渲染图';
            let chartOptions = this.chartOptions.RenderMap;
            chartOptions = chartOptions.filter(item => item.subjectId === layers.name);
            this.mapData = chartOptions[0].data;
            this.sheetName = chartOptions[0].sheetName;
            this.subjectId = layers.name;
          });
        },
        scatter() {
          this.$nextTick(() => {
            this.chartType = 'ScatterMap';
            this.isSelectType = true;
            this.subjectType = '散点图';
            let chartOptions = this.chartOptions.ScatterMap;
            chartOptions = chartOptions.filter(item => item.subjectId === layers.name);
            this.mapData = chartOptions[0].data;
            this.sheetName = chartOptions[0].sheetName;
            this.subjectId = layers.name;
          });
        },
        heatmap() {
          this.$nextTick(() => {
            this.chartType = 'HeatMap';
            this.isSelectType = true;
            this.subjectType = '热力图';
            let chartOptions = this.chartOptions.HeatMap;
            chartOptions = chartOptions.filter(item => item.subjectId === layers.name);
            this.mapData = chartOptions[0].data;
            this.sheetName = chartOptions[0].sheetName;
            this.subjectId = layers.name;
          });
        },
      };
      selectType[layers.types].call(this);
    },
    // 数据源改变时，重新提交store
    sheetName(sheetName) {
      if (this.chartType !== '') {
        let chartOptions = this.chartOptions[this.chartType];
        if (this.subjectId !== '')
          chartOptions = chartOptions.filter(item => item.subjectId === this.subjectId);
        chartOptions[0].data = this.mapData;
        chartOptions[0].sheetName = this.sheetName;
        let currentControl = this.controls[this.currentId];
        currentControl.options[this.chartType] = chartOptions;
        this.$store.commit(types.UPDATE_CHART_CONFIG, {
          data: { [this.currentId]: currentControl },
        });
      }
    },
  },
  mounted() {},
  beforeDestroy() {
    this.isSelectType = false;
    this.subjectType = '';
    this.chartType = '';
    this.subjectId = '';
  },
  methods: {
    // 查表数据
    async addMapData() {
      this.newData = true;
      const dataSheet = await this.getAllAppList({ typeId: '92101,92200,92103,92102,92300' });
      dataSheet.data.forEach(item => {
        this.dataSheetList.push({
          name: item.name,
          id: item.id,
        });
      });
    },
    // 添加数据,这时要判断是新增组件，还是编辑组件
    async addNewData() {
      this.sheetLoader = new SheetLoader(this.middleSheetName);
      const response = await this.sheetLoader.getData();
      if (typeof response === 'object') {
        if (response.heatmap) {
          this.mapData = response.heatmap;
        } else {
          this.mapData = response;
        }
      } else {
        this.mapData = response;
      }
      this.sheetName = this.sheetLoader.dataInfo.name;
    },
    //TODO: 选择数据表（从云盘里面来）
    selectDataSheet(item) {
      this.middleSheetName = item;
    },
    // 选择专题图类型
    elementType(item) {
      // 专题图需要给出标识subjectId，以_分隔
      this.chartType = item.type;
      let mapData = this.controls[this.currentId];
      let onlyId = uuid(3);
      this.subjectId = 'render_' + onlyId;
      let defaultParams;
      if (item.type === 'RenderMap' || item.type === 'ScatterMap') {
        defaultParams = this.setDefaultParams(item.type);
      } else {
        defaultParams = null;
      }
      if (mapData.options[item.type]) {
        mapData.options[item.type].push({
          subjectId: this.subjectId,
          sheetName: this.sheetName,
          data: this.mapData,
          options: { ...mapConfig[item.id], ...defaultParams },
        });
      } else {
        mapData.options[item.type] = [
          {
            subjectId: this.subjectId,
            sheetName: this.sheetName,
            data: this.mapData,
            options: { ...mapConfig[item.id], ...defaultParams },
          },
        ];
      }
      this.$emit('on-addSubject', true);
      this.$events.emit('on-setconfig', this.subjectId);
      this.$store.commit(types.UPDATE_CHART_CONFIG, {
        data: { [this.$store.getters.currentId]: mapData },
      });
    },
    // 根据类型渲染配置字段
    setDefaultParams(types) {
      let dataValue;
      const setType = {
        RenderMap() {
          dataValue = this.getParams();
        },
        ScatterMap() {
          dataValue = this.getParams();
        },
      };
      setType[types].call(this);
      return dataValue;
    },
    // TODO: 判断处理
    getParams() {
      let dataValue;
      let maplayerParams = [];
      if (this.mapData.features) {
        const allParams = this.mapData.features[0].properties;
        for (const key in allParams) {
          if (typeof allParams[key] === 'number') {
            maplayerParams.push({
              value: key,
            });
          }
        }
        dataValue = { dataValue: maplayerParams[0].value };
      } else {
        this.$Message.error('数据格式错误！请重新选择数据');
      }
      return dataValue;
    },
  },
};
</script>

<template>
  <div class="datav-map-data">
    <div
      class="mapdata-add"
      @click="addMapData">
      <Icon
        type="plus-round"
        size="18"
        color="#20a1ff"></Icon>
      <span>添加数据</span>
      <span>
        已选数据：{{ sheetName }}
      </span>
    </div>
    <div class="mapadd-content">
      <div
        v-if="!isSelectType"
        class="subject-type">
        <p>专题图类型</p>
        <div class="all-chart-config">
          <span
            v-for="(item,index) in chartlist"
            :key="index"
            :class="sheetName===''?'hand-disable':''"
            class="chart-type"
            @click="elementType(item)">
            <img :src="item.img" >
            <span>{{ item.name }}</span>
            <div
              v-if="sheetName === ''"
              class="disabled"
            >
            </div>
          </span>
        </div>
      </div>
      <div
        v-else
        class="subject-type">
        <p>专题图类型</p>
        <span class="selected">当前编辑类型：{{ subjectType }}</span>
      </div>
      <div class="subject-config">
        <p>专题图配置</p>
        <span v-if="chartType===''">请选择专题图...</span>
        <MapConfig
          :chart-type="chartType"
          :subject-id="subjectId"></MapConfig>
      </div>
    </div>
    <!-- 添加叠加图层-->
    <Modal
      v-model="newData"
      class="datav-mapdata-modal"
      @on-ok="addNewData">
      <p>选择地图数据</p>
      <DataList
        :dataList="dataSheetList"
        @on-selectList="selectDataSheet"></DataList>
    </Modal>
  </div>
</template>

<style lang="less" scoped>
.datav-map-data {
  width: 100%;
  height: 100%;

  .mapdata-add {
    width: 100%;
    height: 60px;
    text-align: center;
    line-height: 60px;

    span {
      margin-left: 5px;
      height: 22px;
      line-height: 22px;
      font-size: 14px;
    }
    span:last-child {
      padding-left: 10px;
      border-left: 1px solid #20a1ff;
      color: #20a1ff;
      font-size: 10px;
    }
  }

  .mapdata-add:hover {
    cursor: pointer;
    border: 1px dashed #20a1ff;
  }

  .mapadd-content {
    margin: 4px auto;
    width: 95%;
    border: 1px solid #aaaaaa;

    .subject-type,
    .subject-config {
      > p {
        margin-top: 10px;
        margin-left: 15px;
        padding-left: 5px;
        line-height: 25px;
        height: 25px;
        color: #20a1ff;
        font-size: 14px;
        border-left: 2px solid #20a1ff;
      }

      > span {
        padding-left: 22px;
        font-size: 10px;
        color: #777;
      }

      .selected {
        display: block;
        margin-top: 10px;
        font-size: 14px;
      }
    }

    .all-chart-config {
      width: 95%;
      margin: 0 auto;
    }
    .chart-type {
      position: relative;
      margin: 10px 2px 0 10px;
      display: inline-block;
      cursor: pointer;
      text-align: center;
      border: 1px dashed rgba(225, 255, 255, 0);

      img {
        display: block;
        padding: 5px;
        margin: 0 auto;
      }

      span {
        margin-bottom: 5px;
        display: block;
        font-size: 8px;
      }
    }
    .chart-type:hover {
      border: 1px dashed #20a1ff;
    }
    .hand-disable {
      pointer-events: none;
    }

    .disabled {
      position: absolute;
      top: 0;
      padding: 5px;
      width: 100%;
      height: 60%;
      background: #eee;
      overflow: hidden;
      opacity: 0.8;
    }

    .subject-config {
      > span {
        display: block;
        margin-top: 10px;
      }
    }
  }
}

.datav-mapdata-modal {
  p {
    font-size: 14px;
    margin-bottom: 10px;
  }
}
</style>
